<template>
  <div class="accordion-panel" @click="toggle">
    <div class="accordion-header">
      {{ title }}
      <i :class="['arrow', isOpen ? 'open' : '']"></i>
    </div>
    <transition name="fade">
      <div v-if="isOpen" class="accordion-content">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    isOpen: Boolean,
  },
  methods: {
    toggle() {
      this.$emit('toggle'); // 触发展开/收起事件
    },
  },
};
</script>

<style scoped>
.accordion-panel {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}

.accordion-header {
  padding: 10px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.open {
  transform: rotate(90deg);
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  overflow: hidden;
}
</style>